<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'login.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/demo/demo.css">
    
    <script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.min.js"></script>
	<script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    <!-- script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/login.js"></script-->
    <script type="text/javascript">
    	$(document).ready(function (){
    		$("#loginsubmit").click(function () {   
        	//必须先对提交表单数据数据进行序列化，采用jQuery的serialize()方法  
        	var params = $("#fmLogin").serialize();          
        	//alert( "params:" +params );     
        	$.ajax({     
	            url:'<%=this.getServletContext().getContextPath()%>/login/LoginAction!valide',  
	            type:'post',  
	            data:params,  
	            dataType:'json',          
	            success:function (data) {	 
	                var resp = data.errortip;
	               // alert(data.user);
	                if ( resp == "验证成功" ){                	          
	                	top.location.href='<%=this.getServletContext().getContextPath()%>/main.jsp' ;
	                }                       	
	            	else{ 
	            		$("#errortip").html("");            
	                	$("#errortip").append("<div>登录失败:" + data.errortip+ "</div>");
	                }                
	            },
	            complete:function( XMLHttpRequest, textStatus ){	            	
	            },
	            error:function( XMLHttpRequest, textStatus, errorThrown){
	            	alert( "error:"+ errorThrown );
	            }    
        	});  
    	});      	
    });
    </script>
  </head>
  
  <body>
    This is Login JSP page. <br>
    
    <h2>用户登录</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The panel is a container for other components or elements.</div>
    </div>
    <div style="margin:10px 0;">

    </div>
	<div id="p" class="easyui-panel" title="Basic Panel"
		style="width:500px;height:200px;padding:10px;">
		<p style="font-size:14px">jQuery EasyUI framework helps you build
			your web pages easily.</p>

		<div>
			<form id="fmLogin" >
			<!-- action="<%=basePath%>login/LoginAction!valide" method="post" -->
				<div id="errortip">错误提示</div><br />
				<label for="username">用户</label>
				<input id="username" name="user.username" type="text"  />
				<br />
				<label for="password">密码</label>
				<input id="password" name="user.password" type="password"  />
				<br />				
			</form>
			<div>
				<input id="loginsubmit"　value="登录" type="submit" />
				<input id="clearinput" value="重置" type="reset" />
			</div>
					
		</div>

	</div>

</body>
</html>
